<!DOCTYPE html>
<html lang="en" class="no-js">
  <!-- Head -->
  <head>
    <title>Stream - Bootstrap 4 UI Kit</title>

    <!-- Meta -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="keywords" content="Bootstrap Theme, Freebies, UI Kit, MIT license">
    <meta name="description" content="Stream - Bootstrap 4 UI Kit">
    <meta name="author" content="htmlstream.com">

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <!-- Web Fonts -->
    <link href="//fonts.googleapis.com/css?family=Playfair+Display:400,700%7COpen+Sans:300,400,700" rel="stylesheet">

    <!-- Bootstrap Styles -->
    <link rel="stylesheet" type="text/css" href="assets/vendors/bootstrap/css/bootstrap.min.css">

    <!-- Components Vendor Styles -->
    <link rel="stylesheet" type="text/css" href="assets/vendors/font-awesome/css/fontawesome-all.min.css">

    <!-- Theme Styles -->
    <link rel="stylesheet" type="text/css" href="assets/css/styles.css">

    <!-- Demo Custome Code (demo page only) -->
    <style type="text/css">
      /* Button Spaces*/
      .demo-btn-space .btn,
      .demo-progress-space .progress {
        margin-bottom: 10px;
      }

      /* About Section */
      .demo-about-section {
        position: relative;
        padding-top: 6.25rem;
      }

      @media (min-width: 991px) {
        .demo-about-section {
          margin-top: -50px;
          padding-top: 0;
        }
      }

      /* Download Section */
      .demo-download-section {
        position: relative;
        z-index: 1;
        margin: -60px 0;
      }

      /* Google Fonts */
      .demo-fonts-box {
        padding: 30px;
        line-height: 2;
        letter-spacing: 2px;
      }

      .demo-fonts-box__item {
        line-height: 1;
      }
      .demo-fonts-box__item-xs {
        line-height: 1;
        font-size: 30px;
      }
      .demo-fonts-box__item-xl {
        line-height: 1;
        font-size: 90px;
      }
    </style>
    <!-- End Demo Custome Code (demo page only) -->
  </head>
  <!-- End Head -->

  <body id="js-home">
    <!-- Header -->
    <header role="header">
      <!-- Navbar -->
      <nav class="js-navbar-scroll navbar fixed-top navbar-expand-lg navbar-transparent navbar-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="index.html">
            <img src="assets/img/logo-white.png" alt="Stream UI Kit" style="width: 100px;">
          </a>

          <button class="navbar-toggler" type="button"
                  data-toggle="collapse"
                  data-target="#navbarTogglerDemo"

                  aria-controls="navbarTogglerDemo"
                  aria-expanded="false"
                  aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarTogglerDemo">
            <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
              <li class="nav-item mr-4 mb-2 mb-lg-0">
                <a href="#js-scroll-to-section" class="nav-link" href="#!">
                  <i class="fas fa-cubes u-font-size-90 mr-1"></i> UI Kit Components
                </a>
              </li>
              <li class="nav-item mr-4 mb-2 mb-lg-0">
                <a class="nav-link" href="#js-scroll-to-demos">
                  <i class="fas fa-cube u-font-size-90 mr-1"></i> Example Pages
                </a>
              </li>
              <li class="nav-item mr-4 mb-2 mb-lg-0">
                <a class="nav-link" href="https://htmlstream.com/public/preview/stream-ui-kit/docs.html">
                  <i class="fas fa-book u-font-size-90 mr-1"></i> Docs
                </a>
              </li>
            </ul>
            <div>
              <a class="btn btn-primary" href="https://htmlstream.com/templates/stream-ui-kit">
                <i class="fas fa-cloud-download-alt mr-1"></i> Download
              </a>
            </div>
          </div>
        </div>
      </nav>
      <!-- End Navbar -->

      <!-- Promo Block -->
      <section class="js-parallax u-promo-block" style="background-image: url(assets/img-temp/promo/img1.jpg);">
        <!-- Promo Content -->
        <div class="container text-white u-ver-center u-content-space">
          <div class="row justify-content-center">
            <div class="col-12">
              <div class="text-center">
                <p class="h6 text-uppercase u-letter-spacing-sm mb-0">A beautiful Open Source Bootstrap 4 UI Kit!</p>
                <h1 class="display-2 display-md-1 u-font-accent font-weight-light">Stream <span class="d-none d-md-inline-block">-</span> UI Kit</h1>
                <a href="#js-scroll-to-section" class="text-uppercase text-white font-weight-bold u-font-size-75">Discover now</a>
                <span class="fa fa-angle-down d-block"></span>
              </div>
            </div>
          </div>
        </div>
        <!-- End Promo Content -->
      </section>
      <!-- End Promo Block -->
    </header>
    <!-- End Header -->

    <main role="main">
      <!-- About -->
      <section class="demo-about-section u-content-space-bottom">
        <div class="container">
          <!-- Author Avatar -->
          <article class="mb-5">
            <div class="d-flex align-items-center justify-content-center text-uppercase font-weight-bold small">
              <span class="mr-3">Product By </span>
              <img class="rounded-circle mr-3 mb-1" src="assets/img-temp/ava/img1.jpg" width="35" alt="Author Image">
              <a href="https://htmlstream.com">Htmlstream</a>
            </div>
          </article>
          <!-- End Author Avatar -->

          <!-- About Content -->
          <article class="w-md-75 mx-auto">
            <p class="lead font-weight-normal text-center mb-4">Stream UI Kit is beautiful Open Source Bootstrap 4 UI Kit under MIT license. The UI Kit comes with 5 beautiful complete pages and includes over 20 reusable and customizable UI Blocks. It’s lightweight and only ~17kb when minified.</p>

            <!-- Social Networks -->
            <div class="d-flex justify-content-center">
              <!-- Facebook Like -->
              <div class="mr-2" style="margin-top: -5px !important;">
                <div class="fb-like"
                  data-href="http://facebook.com/htmlstream"
                  data-layout="button_count"
                  data-action="like"
                  data-show-faces="false"
                  data-size="small">
                </div>
              </div>
              <!-- End Facebook Like -->

              <!-- Twitter Follow -->
              <div class="mr-2">
                <a href="https://twitter.com/htmlstream" class="twitter-follow-button" data-show-count="true">@htmlstream</a>
              </div>
              <!-- End Twitter Follow -->

              <!-- Github Star -->
              <div class="d-none d-sm-block">
                <a class="github-button" href="https://github.com/htmlstreamofficial/stream-ui-kit" data-show-count="true" aria-label="Star stream-ui-kit on GitHub">Star</a>
              </div>
              <!-- End Github Star -->
            </div>
            <!-- End Social Networks -->
          </article>
          <!-- About Content -->
        </div>
      </section>
      <!-- End About -->

      <hr>

      <!-- Colors -->
      <section id="js-scroll-to-section" class="u-content-space">
        <div class="container">
          <header class="w-md-50 mx-auto text-center mb-7">
            <h2 class="h1 font-weight-light mb-1">Colors</h2>
            <p>We've updated Bootstrap’s default colors to brighter and trendy color variations in order to improve the contrast and design.</p>
          </header>

          <ul class="list-unstyled row">
            <li class="col-lg-3 text-center mb-7">
              <div class="bg-primary rounded mb-2" style="padding: 50px 25px;">
                <small class="text-white d-block">#59287a</small>
                <span class="text-white">.bg-primary</span>
              </div>
              <span class="text-primary">.text-primary</span>
            </li>

            <li class="col-lg-3 text-center mb-7">
              <div class="bg-secondary rounded mb-2" style="padding: 50px 25px;">
                <small class="text-white d-block">#00c9a7</small>
                <span class="text-white">.bg-secondary</span>
              </div>
              <span class="text-secondary">.text-secondary</span>
            </li>

            <li class="col-lg-3 text-center mb-7">
              <div class="bg-success rounded mb-2" style="padding: 50px 25px;">
                <small class="text-white d-block">#0dd157</small>
                <span class="text-white">.bg-success</span>
              </div>
              <span class="text-success">.text-success</span>
            </li>

            <li class="col-lg-3 text-center mb-7">
              <div class="bg-danger rounded mb-2" style="padding: 50px 25px;">
                <small class="text-white d-block">#fb4143</small>
                <span class="text-white">.bg-danger</span>
              </div>
              <span class="text-danger">.text-danger</span>
            </li>

            <li class="col-lg-3 text-center mb-7">
              <div class="bg-warning rounded mb-2" style="padding: 50px 25px;">
                <small class="text-white d-block">#fab633</small>
                <span class="text-white">.bg-warning</span>
              </div>
              <span class="text-warning">.text-warning</span>
            </li>

            <li class="col-lg-3 text-center mb-7">
              <div class="bg-info rounded mb-2" style="padding: 50px 25px;">
                <small class="text-white d-block">#2972fa</small>
                <span class="text-white">.bg-info</span>
              </div>
              <span class="text-info">.text-info</span>
            </li>

            <li class="col-lg-3 text-center mb-7">
              <div class="bg-dark rounded mb-2" style="padding: 50px 25px;">
                <small class="text-white d-block">#1b1e24</small>
                <span class="text-white">.bg-dark</span>
              </div>
              <span class="text-dark">.text-dark</span>
            </li>

            <li class="col-lg-3 text-center mb-7">
              <div class="bg-light rounded mb-2" style="padding: 50px 25px;">
                <small class="text-dark d-block">#f6f9fc</small>
                <span class="text-dark">.bg-light</span>
              </div>
              <span class="text-light bg-dark">.text-light</span>
            </li>

            <li class="col-lg-3 text-center mb-7">
              <div class="bg-white u-box-shadow-sm rounded mb-2" style="padding: 50px 25px;">
                <small class="text-dark d-block">#fff</small>
                <span class="text-dark">.bg-white</span>
              </div>
              <span class="text-white bg-dark">.text-white</span>
            </li>
          </ul>
        </div>
      </section>
      <!-- End Colors -->

      <hr>

      <!-- Typography -->
      <section class="u-content-space">
        <div class="container">
          <header class="w-md-50 mx-auto text-center mb-7">
            <h2 class="h1 font-weight-light mb-1">Typography</h2>
            <p>The following Typography examples are based on Bootstrap and it includes simple and easily customized typography elements.</p>
          </header>

          <!-- Headings -->
          <div>
            <h3 class="h5 mb-3">Headings</h3>

            <!-- Headings 1 -->
            <div class="row align-items-center">
              <div class="col-lg-2 small">Heading 1</div>
              <div class="col-lg-10">
                <h1 class="mb-0">h1. Stream UI Kit heading <span class="badge badge-secondary">New</span></h1>
              </div>
            </div>
            <!-- End Headings 1 -->

            <hr class="u-opacity-6">

            <!-- Headings 2 -->
            <div class="row align-items-center">
              <div class="col-lg-2 small">Heading 2</div>
              <div class="col-lg-10">
                <h2 class="mb-0">h2. Stream UI Kit heading <span class="badge badge-secondary">New</span></h2>
              </div>
            </div>
            <!-- End Headings 2 -->

            <hr class="u-opacity-6">

            <!-- Headings 3 -->
            <div class="row align-items-center mb-3">
              <div class="col-lg-2 small">Heading 3</div>
              <div class="col-lg-10">
                <h3 class="mb-0">h3. Stream UI Kit heading <span class="badge badge-secondary">New</span></h3>
              </div>
            </div>
            <!-- End Headings 3 -->

            <hr class="u-opacity-6">

            <!-- Headings 4 -->
            <div class="row align-items-center mb-3">
              <div class="col-lg-2 small">Heading 4</div>
              <div class="col-lg-10">
                <h4 class="mb-0">h4. Stream UI Kit heading <span class="badge badge-secondary">New</span></h4>
              </div>
            </div>
            <!-- End Headings 4 -->

            <hr class="u-opacity-6">

            <!-- Headings 5 -->
            <div class="row align-items-center mb-3">
              <div class="col-lg-2 small">Heading 5</div>
              <div class="col-lg-10">
                <h5 class="mb-0">h5. Stream UI Kit heading <span class="badge badge-secondary">New</span></h5>
              </div>
            </div>
            <!-- End Headings 5 -->

            <hr class="u-opacity-6">

            <!-- Headings 6 -->
            <div class="row mb-3">
              <div class="col-lg-2 small">Heading 6</div>
              <div class="col-lg-10">
                <h6 class="mb-0">h6. Stream UI Kit heading <span class="badge badge-secondary">New</span></h6>
              </div>
            </div>
            <!-- End Headings 6 -->
          </div>
          <!-- Headings -->

          <hr class="my-7">

          <!-- Google Fonts -->
          <div>
            <h3 class="h5 mb-3">Google Fonts</h3>

            <!-- Font Toggle -->
            <div class="mb-4">
              <button class="js-font-change-btn btn btn-sm btn-outline-primary mr-1">
                <i class="fa fa-toggle-off js-font-change-btn__icon"></i> Change Font
              </button>
              <span class="small text-muted">
                <span class="js-font-content__chnage1">Open Sans</span>
                <span class="js-font-content__chnage2 d-none">Playfair Display</span>
              </span>
            </div>
            <!-- End Font Toggle -->

            <!-- Open Sans (Light) -->
            <div class="js-font-content demo-fonts-box text-dark u-box-shadow-sm rounded mb-7">
              <div class="row">
                <div class="col-lg">
                  <p class="demo-fonts-box__item-xl">Aa</p>
                  <p class="js-font-content__chnage1 demo-fonts-box__item-xs">Open Sans</p>
                  <p class="js-font-content__chnage2 d-none demo-fonts-box__item-xs">Playfair Display</p>
                </div>
                <div class="col-lg">
                  <p class="demo-fonts-box__item">Light</p>
                  <p class="demo-fonts-box__item-xs font-weight-light">AaBbCcDd</p>
                  <br>
                  <p class="demo-fonts-box__item">Regular</p>
                  <p class="demo-fonts-box__item-xs">AaBbCcDd</p>
                </div>
                <div class="col-lg">
                  <p class="demo-fonts-box__item">Bold</p>
                  <p class="demo-fonts-box__item-xs font-weight-bold">AaBbCcDd</p>
                  <br>
                  <p class="demo-fonts-box__item">Numbers (Light)</p>
                  <p class="demo-fonts-box__item-xs" class="font-weight-light">0123456789</p>
                </div>
              </div>
            </div>
            <!-- End Open Sans (Light) -->

            <!-- Open Sans (Dark) -->
            <div class="js-font-content demo-fonts-box bg-dark text-light u-box-shadow-sm rounded">
              <div class="row">
                <div class="col-lg">
                  <p class="demo-fonts-box__item-xl">Aa</p>
                  <p class="js-font-content__chnage1 demo-fonts-box__item-xs">Open Sans</p>
                  <p class="js-font-content__chnage2 demo-fonts-box__item-xs d-none">Playfair Display</p>
                </div>
                <div class="col-lg">
                  <p class="demo-fonts-box__item">Light</p>
                  <p class="demo-fonts-box__item-xs font-weight-light">AaBbCcDd</p>
                  <br>
                  <p class="demo-fonts-box__item">Regular</p>
                  <p class="demo-fonts-box__item-xs">AaBbCcDd</p>
                </div>
                <div class="col-lg">
                  <p class="demo-fonts-box__item">Bold</p>
                  <p class="demo-fonts-box__item-xs font-weight-bold">AaBbCcDd</p>
                  <br>
                  <p class="demo-fonts-box__item">Numbers (Light)</p>
                  <p class="demo-fonts-box__item-xs font-weight-light">0123456789</p>
                </div>
              </div>
            </div>
            <!-- End Open Sans (Dark) -->
          </div>
          <!-- End Google Fonts -->

          <hr class="my-7">

          <!-- Lead -->
          <div>
            <h3 class="h5 mb-3">Lead</h3>

            <p class="lead">This is Lead text and vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, simple and easy for any content and other random text content is here est non commodo luctus.</p>
          </div>
          <!-- End Lead -->

          <hr class="my-7">

          <!-- Blockquotes -->
          <div>
            <h3 class="h5 mb-3">Blockquotes</h3>

            <ul class="nav nav nav-pills mb-5" id="blockquotes-tab" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" id="blockquotes-left-tab-1" data-toggle="pill" href="#blockquotes-left-1" role="tab" aria-controls="blockquotes-left-1" aria-selected="true">
                  <i class="fas fa-align-left mr-2"></i> Left Bordered
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="blockquotes-center-tab-1" data-toggle="pill" href="#blockquotes-center-1" role="tab" aria-controls="blockquotes-center-1" aria-selected="false">
                  <i class="fas fa-align-center mr-2"></i> Centered
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="blockquotes-right-tab-1" data-toggle="pill" href="#blockquotes-right-1" role="tab" aria-controls="blockquotes-right-1" aria-selected="false">
                  <i class="fas fa-align-right mr-2"></i> Right Bordered
                </a>
              </li>
            </ul>

            <div class="tab-content" id="blockquotes-tabContent">
              <div class="tab-pane fade show active" id="blockquotes-left-1" role="tabpanel" aria-labelledby="blockquotes-left-tab-1">
                <!-- Left Bordered -->
                <blockquote class="blockquote-v1 blockquote-v1--left">
                  <p>"This UI Kit is damn great! It is really beautiful nice UI Kit which offers quite a large set of options and the coding is done quickly and seamlessly. Thank you!"</p>
                  <footer class="blockquote-footer">User feedback</footer>
                </blockquote>
                <!-- End Left Bordered -->
              </div>

              <div class="tab-pane fade" id="blockquotes-center-1" role="tabpanel" aria-labelledby="blockquotes-center-tab-1">
                <!-- Centered -->
                <blockquote class="blockquote-v1 text-center">
                  <p>"This UI Kit is damn great! It is really beautiful nice UI Kit which offers quite a large set of options and the coding is done quickly and seamlessly. Thank you!"</p>
                  <footer class="blockquote-footer">User feedback</footer>
                </blockquote>
                <!-- End Centered -->
              </div>

              <div class="tab-pane fade" id="blockquotes-right-1" role="tabpanel" aria-labelledby="blockquotes-right-tab-1">
                <!-- Right Bordered -->
                <blockquote class="blockquote-v1 blockquote-v1--right text-right">
                  <p>"This UI Kit is damn great! It is really beautiful nice UI Kit which offers quite a large set of options and the coding is done quickly and seamlessly. Thank you!"</p>
                  <footer class="blockquote-footer">User feedback</footer>
                </blockquote>
                <!-- End Right Bordered -->
              </div>
            </div>
          </div>
          <!-- End Blockquotes -->
        </div>
      </section>
      <!-- End Typography -->

      <hr>

      <!-- Buttons -->
      <section class="u-content-space">
        <div class="container">
          <header class="w-md-50 mx-auto text-center mb-7">
            <h2 class="h1 font-weight-light mb-1">Buttons</h2>
            <p>Enhanced and extended Bootstrap’s default buttons colors and options with more variations to use with any type of content.</p>
          </header>

          <!-- Border Radius -->
          <div class="demo-btn-space mb-7">
            <h3 class="h6 mb-3">Border Radius</h3>
            <button type="button" class="btn btn-primary rounded-0">Square</button>
            <button type="button" class="btn btn-primary">Default</button>
            <button type="button" class="btn btn-primary btn--pill">Pilled</button>
          </div>
          <!-- End Border Radius -->

          <!-- Types with Icons -->
          <div class="demo-btn-space mb-7">
            <h3 class="h6 mb-3">Types with Icons</h3>
            <button type="button" class="btn btn-primary rounded-0">
              <i class="fab fa-facebook-messenger mr-1"></i> Square
            </button>
            <button type="button" class="btn btn-primary">
              <i class="fab fa-facebook-messenger mr-1"></i> Default
            </button>
            <button type="button" class="btn btn-primary btn--pill">
              <i class="fab fa-facebook-messenger mr-1"></i> Pilled
            </button>
            <button type="button" class="btn btn-primary btn--circle">
              <i class="fab fa-facebook-messenger"></i>
            </button>
          </div>
          <!-- End Types with Icons -->

          <!-- Sizes -->
          <div class="demo-btn-space mb-7">
            <h3 class="h6 mb-3">Sizes</h3>
            <span class="mr-5">
              <button type="button" class="btn btn-sm btn-primary">Small</button>
              <button type="button" class="btn btn-primary">Regular</button>
              <button type="button" class="btn btn-lg btn-primary">Large</button>
            </span>

            <span class="mr-5">
              <button type="button" class="btn btn-sm btn-primary btn--circle">
                <i class="fab fa-facebook-messenger"></i>
              </button>

              <button type="button" class="btn btn-primary btn--circle">
                <i class="fab fa-facebook-messenger"></i>
              </button>

              <button type="button" class="btn btn-lg btn-primary btn--circle">
                <i class="fab fa-facebook-messenger"></i>
              </button>
            </span>
          </div>
          <!-- End Sizes -->

          <!-- Colors -->
          <div class="demo-btn-space mb-7">
            <h3 class="h6 mb-3">Colors</h3>
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-secondary">Secondary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-light">Light</button>
            <button type="button" class="btn btn-dark">Dark</button>
            <button type="button" class="btn btn-link">Link</button>
          </div>
          <!-- End Colors -->

          <!-- Outline Colors -->
          <div class="demo-btn-space mb-7">
            <h3 class="h6 mb-3">Outline Colors</h3>
            <button type="button" class="btn btn-outline-primary">Primary</button>
            <button type="button" class="btn btn-outline-secondary">Secondary</button>
            <button type="button" class="btn btn-outline-success">Success</button>
            <button type="button" class="btn btn-outline-danger">Danger</button>
            <button type="button" class="btn btn-outline-warning">Warning</button>
            <button type="button" class="btn btn-outline-info">Info</button>
            <button type="button" class="btn btn-outline-light">Light</button>
            <button type="button" class="btn btn-outline-dark">Dark</button>
          </div>
          <!-- End Outline Colors -->

          <!-- Block -->
          <div class="demo-btn-space mb-7">
            <h3 class="h6 mb-3">Block</h3>
            <div class="row">
              <div class="col-lg-6 mb-2 mb-lg-0">
                <button type="button" class="btn btn-block btn-sm btn-primary">Small</button>
                <button type="button" class="btn btn-block btn-primary">Default</button>
                <button type="button" class="btn btn-block btn-lg btn-primary">Large</button>
              </div>

              <div class="col-lg-6">
                <button type="button" class="btn btn-block btn-sm btn-outline-primary">Small</button>
                <button type="button" class="btn btn-block btn-outline-primary">Default</button>
                <button type="button" class="btn btn-block btn-lg btn-outline-primary">Large</button>
              </div>
            </div>
          </div>
          <!-- End Block -->
        </div>
      </section>
      <!-- End Buttons -->

      <hr>

      <!-- Forms -->
      <section class="u-content-space">
        <div class="container">
          <header class="w-md-50 mx-auto text-center mb-7">
            <h2 class="h1 font-weight-light mb-1">Forms</h2>
            <p>Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.</p>
          </header>

          <form>
            <!-- General Form Controls -->
            <div class="row mb-4">
              <!-- Form Controls -->
              <div class="col-lg-6 mb-3">
                <div class="card">
                  <!-- Card Header -->
                  <div class="card-header">
                    <h3 class="h6 mb-0">Form Controls</h3>
                  </div>
                  <!-- End Card Header -->

                  <!-- Card Body -->
                  <div class="card-body">
                    <div class="form-group mb-4">
                      <label for="defaultInput" class="u-font-size-90">Default input</label>
                      <input type="email" class="form-control" id="defaultInput" aria-describedby="emailHelp" placeholder="Placeholder">
                    </div>

                    <hr class="my-4">

                    <div class="form-group mb-4">
                      <label for="inputLeftIcon" class="u-font-size-90">Input with left icon</label>
                      <span class="form-icon-wrapper">
                        <span class="form-icon form-icon--left">
                          <i class="fas fa-user-circle form-icon__item"></i>
                        </span>
                        <input type="email" class="form-control form-icon-input-left" id="inputLeftIcon" aria-describedby="emailHelp" placeholder="Placeholder">
                      </span>
                    </div>

                    <div class="form-group mb-4">
                      <label for="inputRightIcon" class="u-font-size-90">Input with right icon</label>
                      <span class="form-icon-wrapper">
                        <span class="form-icon form-icon--right">
                          <i class="fas fa-user-circle form-icon__item"></i>
                        </span>
                        <input type="email" class="form-control form-icon-input-right" id="inputRightIcon" aria-describedby="emailHelp" placeholder="Placeholder">
                      </span>
                    </div>

                    <hr class="my-4">

                    <div class="form-group mb-4">
                      <label for="disabledTextInput" class="u-font-size-90">Disabled</label>
                      <input type="email" class="form-control" id="disabledTextInput" aria-describedby="disabledTextInput" placeholder="Placeholder" disabled>
                      <small class="form-text text-muted">Text feedback.</small>
                    </div>

                    <div class="form-group mb-4">
                      <label for="disabledTextInput" class="u-font-size-90">Success</label>
                      <input type="email" class="form-control is-valid" id="disabledTextInput" aria-describedby="disabledTextInput" placeholder="Placeholder">
                      <div class="valid-feedback">Success feedback.</div>
                    </div>

                    <div class="form-group">
                      <label for="disabledTextInput" class="u-font-size-90">Error</label>
                      <input type="email" class="form-control is-invalid" id="disabledTextInput" aria-describedby="disabledTextInput" placeholder="Placeholder">
                      <div class="invalid-feedback">Error feedback.</div>
                    </div>
                  </div>
                  <!-- End Card Body -->
                </div>
              </div>
              <!-- End Form Controls -->

              <!-- Pilled Form Controls -->
              <div class="col-lg-6 mb-3">
                <div class="card">
                  <!-- Card Header -->
                  <div class="card-header">
                    <h3 class="h6 mb-0">Pilled Form Controls</h3>
                  </div>
                  <!-- End Card Header -->

                  <!-- Card Body -->
                  <div class="card-body">
                    <div class="form-group mb-4">
                      <label for="defaultInput1" class="u-font-size-90">Default input</label>
                      <input type="email" class="form-control form--pill" id="defaultInput1" aria-describedby="emailHelp" placeholder="Placeholder">
                    </div>

                    <hr class="my-4">

                    <div class="form-group mb-4">
                      <label for="inputLeftIcon1" class="u-font-size-90">Input with left icon</label>
                      <span class="form-icon-wrapper">
                        <span class="form-icon form-icon--left">
                          <i class="fas fa-user-circle form-icon__item"></i>
                        </span>
                        <input type="email" class="form-control form-icon-input-left form--pill" id="inputLeftIcon1" aria-describedby="emailHelp" placeholder="Placeholder">
                      </span>
                    </div>

                    <div class="form-group">
                      <label for="inputRightIcon1" class="u-font-size-90">Input with right icon</label>
                      <span class="form-icon-wrapper">
                        <span class="form-icon form-icon--right">
                          <i class="fas fa-user-circle form-icon__item"></i>
                        </span>
                        <input type="email" class="form-control form-icon-input-right form--pill" id="inputRightIcon1" aria-describedby="emailHelp" placeholder="Placeholder">
                      </span>
                    </div>

                    <hr class="my-4">

                    <div class="form-group mb-4">
                      <label for="disabledTextInput1" class="u-font-size-90">Disabled</label>
                      <input type="email" class="form-control form--pill" id="disabledTextInput1" aria-describedby="disabledTextInput1" placeholder="Placeholder" disabled>
                      <small class="form-text text-muted">Text feedback.</small>
                    </div>

                    <div class="form-group mb-4">
                      <label for="disabledTextInput1" class="u-font-size-90">Success</label>
                      <input type="email" class="form-control form--pill is-valid" id="disabledTextInput1" aria-describedby="disabledTextInput1" placeholder="Placeholder">
                      <div class="valid-feedback">Success feedback.</div>
                    </div>

                    <div class="form-group">
                      <label for="disabledTextInput1" class="u-font-size-90">Error</label>
                      <input type="email" class="form-control form--pill is-invalid" id="disabledTextInput1" aria-describedby="disabledTextInput1" placeholder="Placeholder">
                      <div class="invalid-feedback">Error feedback.</div>
                    </div>
                  </div>
                  <!-- End Card Body -->
                </div>
              </div>
              <!-- End Pilled Form Controls -->
            </div>
            <!-- End General Form Controls -->

            <!-- Checkboxes and Radios -->
            <div class="row mb-4">
              <!-- Checkboxes -->
              <div class="col-lg-6 mb-3">
                <div class="card">
                  <!-- Card Header -->
                  <div class="card-header">
                    <h3 class="h6 mb-0">Checkboxes</h3>
                  </div>
                  <!-- End Card Header -->

                  <!-- Card Body -->
                  <div class="card-body">
                    <div class="custom-control custom-checkbox mb-2">
                      <input type="checkbox" class="custom-control-input" id="customCheck1">
                      <label class="custom-control-label u-font-size-90" for="customCheck1">Unchecked</label>
                    </div>

                    <div class="custom-control custom-checkbox mb-2">
                      <input type="checkbox" class="custom-control-input" id="customCheck2" checked>
                      <label class="custom-control-label u-font-size-90" for="customCheck2">Checked</label>
                    </div>

                    <hr class="my-4">

                    <div class="custom-control custom-checkbox mb-2">
                      <input type="checkbox" class="custom-control-input" id="customCheck3" disabled>
                      <label class="custom-control-label u-font-size-90" for="customCheck3">Disabled Unchecked</label>
                    </div>

                    <div class="custom-control custom-checkbox mb-2">
                      <input type="checkbox" class="custom-control-input" id="customCheck4" checked disabled>
                      <label class="custom-control-label u-font-size-90" for="customCheck4">Disabled Checked</label>
                    </div>

                    <hr class="my-4">

                    <div class="custom-control custom-checkbox mb-2">
                      <input type="checkbox" class="custom-control-input is-valid" id="customCheck5-1" checked>
                      <label class="custom-control-label u-font-size-90" for="customCheck5-1">Checked Success</label>
                    </div>

                    <div class="custom-control custom-checkbox mb-2">
                      <input type="checkbox" class="custom-control-input is-invalid" id="customCheck5-2">
                      <label class="custom-control-label u-font-size-90" for="customCheck5-2">Unchecked Error</label>
                    </div>
                  </div>
                  <!-- End Card Body -->
                </div>
              </div>
              <!-- End Checkboxes -->

              <!-- Radios -->
              <div class="col-lg-6 mb-3">
                <div class="card">
                  <!-- Card Header -->
                  <div class="card-header">
                    <h3 class="h6 mb-0">Radios</h3>
                  </div>
                  <!-- End Card Header -->

                  <!-- Card Body -->
                  <div class="card-body">
                    <div class="custom-control custom-radio mb-2">
                      <input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
                      <label class="custom-control-label u-font-size-90" for="customRadio1">Unchecked</label>
                    </div>

                    <div class="custom-control custom-radio mb-2">
                      <input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
                      <label class="custom-control-label u-font-size-90" for="customRadio2">Checked</label>
                    </div>

                    <hr class="my-4">

                    <div class="custom-control custom-radio mb-2">
                      <input type="radio" class="custom-control-input" name="customRadioDisabled" id="customRadio3" disabled>
                      <label class="custom-control-label u-font-size-90" for="customRadio3">Disabled Unchecked</label>
                    </div>

                    <div class="custom-control custom-radio mb-2">
                      <input type="radio" class="custom-control-input" name="customRadioDisabled" id="customRadio4" checked disabled>
                      <label class="custom-control-label u-font-size-90" for="customRadio4">Disabled Checked</label>
                    </div>

                    <hr class="my-4">

                    <div class="custom-control custom-radio mb-2">
                      <input type="radio" class="custom-control-input is-valid" name="customRadioUncheckedValidation" id="customRadio5-1" checked>
                      <label class="custom-control-label u-font-size-90" for="customRadio5-1">Checked Success</label>
                    </div>

                    <div class="custom-control custom-radio mb-2">
                      <input type="radio" class="custom-control-input is-invalid" name="customRadioUncheckedValidation" id="customRadio5-2">
                      <label class="custom-control-label u-font-size-90" for="customRadio5-2">Unchecked Error</label>
                    </div>
                  </div>
                  <!-- End Card Body -->
                </div>
              </div>
              <!-- End Radios -->
            </div>
            <!-- End Checkboxes and Radios -->

            <!-- Toggles -->
            <div class="row">
              <!-- Toggles -->
              <div class="col-lg-6 mb-3">
                <div class="card">
                  <!-- Card Header -->
                  <div class="card-header">
                    <h3 class="h6 mb-0">Toggles</h3>
                  </div>
                  <!-- End Card Header -->

                  <!-- Card Body -->
                  <div class="card-body">
                    <!-- Default Toggle (Off) -->
                    <div class="form-group">
                      <label class="d-flex align-items-center justify-content-between u-font-size-90">
                        <span class="form-label-text">Toggle off</span>
                        <div class="form-toggle">
                          <input name="toggleCheckbox" type="checkbox">
                          <div class="form-toggle__item">
                            <i class="d-inline-block"></i>
                          </div>
                        </div>
                      </label>
                    </div>
                    <!-- End Default Toggle (Off) -->

                    <!-- Default Toggle (On) -->
                    <div class="form-group">
                      <label class="d-flex align-items-center justify-content-between u-font-size-90">
                        <span class="form-label-text">Toggle on</span>
                        <div class="form-toggle">
                          <input name="toggleCheckbox" type="checkbox" checked>
                          <div class="form-toggle__item">
                            <i class="d-inline-block"></i>
                          </div>
                        </div>
                      </label>
                    </div>
                    <!-- Default Toggle (On) -->

                    <hr class="my-4">

                    <!-- Disabled Toggle (Off) -->
                    <div class="form-group is-disabled">
                      <label class="d-flex align-items-center justify-content-between u-font-size-90">
                        <span class="form-label-text">Disabled toggle off</span>
                        <div class="form-toggle">
                          <input name="toggleCheckbox" type="checkbox" disabled>
                          <div class="form-toggle__item">
                            <i class="d-inline-block"></i>
                          </div>
                        </div>
                      </label>
                    </div>
                    <!-- End Disabled Toggle (Off) -->

                    <!-- Disabled Toggle (On) -->
                    <div class="form-group is-disabled">
                      <label class="d-flex align-items-center justify-content-between u-font-size-90">
                        <span class="form-label-text">Disabled toggle on</span>
                        <div class="form-toggle">
                          <input name="toggleCheckbox" type="checkbox" checked disabled>
                          <div class="form-toggle__item">
                            <i class="d-inline-block"></i>
                          </div>
                        </div>
                      </label>
                    </div>
                    <!-- End Disabled Toggle (On) -->

                    <hr class="my-4">

                    <!-- Success Toggle (Off) -->
                    <div class="form-group is-invalid">
                      <label class="d-flex align-items-center justify-content-between u-font-size-90">
                        <span class="form-label-text">Error toggle off</span>
                        <div class="form-toggle">
                          <input name="toggleCheckbox" type="checkbox">
                          <div class="form-toggle__item">
                            <i class="d-inline-block"></i>
                          </div>
                        </div>
                      </label>
                    </div>
                    <!-- End Success Toggle (Off) -->

                    <!-- Success Toggle (On) -->
                    <div class="form-group is-valid">
                      <label class="d-flex align-items-center justify-content-between u-font-size-90">
                        <span class="form-label-text">Success toggle on</span>
                        <div class="form-toggle">
                          <input name="toggleCheckbox" type="checkbox" checked>
                          <div class="form-toggle__item">
                            <i class="d-inline-block"></i>
                          </div>
                        </div>
                      </label>
                    </div>
                    <!-- End Success Toggle (On) -->
                  </div>
                  <!-- End Card Body -->
                </div>
              </div>
              <!-- End Toggles -->

              <!-- Toggles with Icon -->
              <div class="col-lg-6 mb-3">
                <div class="card">
                  <!-- Card Header -->
                  <div class="card-header">
                    <h3 class="h6 mb-0">Toggles with Icon</h3>
                  </div>
                  <!-- End Card Header -->

                  <!-- Card Body -->
                  <div class="card-body">
                    <!-- Toggle with Icon (Off) -->
                    <div class="form-group">
                      <label class="d-flex align-items-center justify-content-between u-font-size-90">
                        <span class="form-label-text">Toggle off with icon</span>
                        <div class="form-toggle">
                          <input name="toggleCheckbox" type="checkbox">
                          <div class="form-toggle__item">
                            <i class="fa" data-check-icon="&#xf00c" data-uncheck-icon="&#xf00d"></i>
                          </div>
                        </div>
                      </label>
                    </div>
                    <!-- End Toggle with Icon (Off) -->

                    <!-- Toggle with Icon (On) -->
                    <div class="form-group">
                      <label class="d-flex align-items-center justify-content-between u-font-size-90">
                        <span class="form-label-text">Toggle on with icon</span>
                        <div class="form-toggle">
                          <input name="toggleCheckbox" type="checkbox" checked>
                          <div class="form-toggle__item">
                            <i class="fa" data-check-icon="&#xf00c" data-uncheck-icon="&#xf00d"></i>
                          </div>
                        </div>
                      </label>
                    </div>
                    <!-- End Toggle with Icon (On) -->

                    <hr class="my-4">

                    <!-- Disabled Toggle with Icon (Off) -->
                    <div class="form-group is-disabled">
                      <label class="d-flex align-items-center justify-content-between u-font-size-90">
                        <span class="form-label-text">Disabled toggle off with icon</span>
                        <div class="form-toggle">
                          <input name="toggleCheckbox" type="checkbox" disabled>
                          <div class="form-toggle__item">
                            <i class="fa" data-check-icon="&#xf00c" data-uncheck-icon="&#xf00d"></i>
                          </div>
                        </div>
                      </label>
                    </div>
                    <!-- End Disabled Toggle with Icon (Off) -->

                    <!-- Disabled Toggle with Icon (On) -->
                    <div class="form-group is-disabled">
                      <label class="d-flex align-items-center justify-content-between u-font-size-90">
                        <span class="form-label-text">Disabled toggle on with icon</span>
                        <div class="form-toggle">
                          <input name="toggleCheckbox" type="checkbox" checked disabled>
                          <div class="form-toggle__item">
                            <i class="fa" data-check-icon="&#xf00c" data-uncheck-icon="&#xf00d"></i>
                          </div>
                        </div>
                      </label>
                    </div>
                    <!-- End Disabled Toggle with Icon (On) -->

                    <hr class="my-4">

                    <!-- Error Toggle with Icon (Off) -->
                    <div class="form-group is-invalid">
                      <label class="d-flex align-items-center justify-content-between u-font-size-90">
                        <span class="form-label-text">Error toggle off with icon</span>
                        <div class="form-toggle">
                          <input name="toggleCheckbox" type="checkbox">
                          <div class="form-toggle__item">
                            <i class="fa" data-check-icon="&#xf00c" data-uncheck-icon="&#xf00d"></i>
                          </div>
                        </div>
                      </label>
                    </div>
                    <!-- End Error Toggle with Icon (Off) -->

                    <!-- Success Toggle with Icon (On) -->
                    <div class="form-group is-valid">
                      <label class="d-flex align-items-center justify-content-between u-font-size-90">
                        <span class="form-label-text">Success toggle on with icon</span>
                        <div class="form-toggle">
                          <input name="toggleCheckbox" type="checkbox" checked>
                          <div class="form-toggle__item">
                            <i class="fa" data-check-icon="&#xf00c" data-uncheck-icon="&#xf00d"></i>
                          </div>
                        </div>
                      </label>
                    </div>
                    <!-- End Success Toggle with Icon (On) -->
                  </div>
                  <!-- End Card Body -->
                </div>
              </div>
              <!-- End Toggles with Icon -->
            </div>
            <!-- End Toggles -->
          </form>
        </div>
      </section>
      <!-- End Forms -->

      <hr>

      <!-- Alerts -->
      <section class="u-content-space">
        <div class="container">
          <header class="w-md-50 mx-auto text-center mb-7">
            <h2 class="h1 font-weight-light mb-1">Alerts (Notifications)</h2>
            <p>Use any available utility colors for your contextual feedback messages with Font Awesome icons.</p>
          </header>

          <!-- Alert Primary -->
          <div class="alert bg-primary text-white fade show" role="alert">
            <div class="d-flex">
              <div class="alert__icon mr-3">
                <i class="fas fa-hand-peace"></i>
              </div>

              <div class="align-self-center mr-3">This is a primary alert — check it out!</div>

              <div class="ml-auto">
                <button type="button" class="alert__close alert__close--light" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            </div>
          </div>
          <!-- End Alert Primary -->

          <!-- Alert Secondary -->
          <div class="alert bg-secondary text-white fade show" role="alert">
            <div class="d-flex">
              <div class="alert__icon mr-3">
                <i class="fas fa-thumbs-up"></i>
              </div>

              <div class="align-self-center mr-3">This is a secondary alert — check it out!</div>

              <div class="ml-auto">
                <button type="button" class="alert__close alert__close--light" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            </div>
          </div>
          <!-- End Alert Secondary -->

          <!-- Alert Light -->
          <div class="alert bg-light fade show" role="alert">
            <div class="d-flex">
              <div class="alert__icon mr-3">
                <i class="fas fa-hand-pointer"></i>
              </div>

              <div class="align-self-center mr-3">This is a light alert — check it out!</div>

              <div class="ml-auto">
                <button type="button" class="alert__close alert__close--dark" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            </div>
          </div>
          <!-- End Alert Light -->

          <!-- Alert Dark -->
          <div class="alert bg-dark text-white fade show" role="alert">
            <div class="d-flex">
              <div class="alert__icon mr-3">
                <i class="fas fa-handshake"></i>
              </div>

              <div class="align-self-center mr-3">This is a dark alert — check it out!</div>

              <div class="ml-auto align-self-center">
                <button type="button" class="alert__close alert__close--light" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            </div>
          </div>
          <!-- End Alert Dark -->
        </div>

        <div class="container">
          <hr class="my-7">
        </div>

        <div class="container mb-4">
          <h3 class="h5 mb-1">Full Width</h3>
          <p>Use <code>.rounded-0</code> class to <code>.alert</code> in full width mode to remove border radius.</p>
        </div>

        <!-- Alert Success -->
        <div class="alert bg-success text-white fade show rounded-0" role="alert">
          <div class="container d-flex">
            <div class="alert__icon mr-3">
              <i class="fas fa-check-circle"></i>
            </div>

            <div class="align-self-center mr-3">This is a success alert — check it out!</div>

            <div class="ml-auto">
              <button type="button" class="alert__close alert__close--light" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
          </div>
        </div>
        <!-- End Alert Success -->

        <!-- Alert Danger -->
        <div class="alert bg-danger text-white fade show rounded-0" role="alert">
          <div class="container d-flex">
            <div class="alert__icon mr-3">
              <i class="fas fa-minus-circle"></i>
            </div>

            <div class="align-self-center mr-3">This is a danger alert — check it out!</div>

            <div class="ml-auto">
              <button type="button" class="alert__close alert__close--light" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
          </div>
        </div>
        <!-- End Alert Danger -->

        <!-- Alert Warning -->
        <div class="alert bg-warning text-white fade show rounded-0" role="alert">
          <div class="container d-flex">
            <div class="alert__icon mr-3">
              <i class="fas fa-exclamation-triangle"></i>
            </div>

            <div class="align-self-center mr-3">This is a warning alert — check it out!</div>

            <div class="ml-auto">
              <button type="button" class="alert__close alert__close--light" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
          </div>
        </div>
        <!-- End Alert Warning -->

        <!-- Alert Info -->
        <div class="alert bg-info text-white fade show rounded-0" role="alert">
          <div class="container d-flex">
            <div class="alert__icon mr-3">
              <i class="fas fa-info-circle"></i>
            </div>

            <div class="align-self-center mr-3">This is a info alert — check it out!</div>

            <div class="ml-auto">
              <button type="button" class="alert__close alert__close--light" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
          </div>
        </div>
        <!-- End Alert Warning -->
      </section>
      <!-- End Alerts -->

      <hr>

      <!-- Modals -->
      <section class="u-content-space">
        <div class="container">
          <header class="w-md-50 mx-auto text-center mb-7">
            <h2 class="h1 font-weight-light mb-1">Bootstrap Modals</h2>
            <p>Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for user notifications or completely custom content.</p>
          </header>

          <!-- Modal -->
          <div class="mb-7">
            <h3 class="h5 mb-3">Modal Types &amp; Positions</h3>

            <div class="row">
              <div class="col-6 col-md-4 col-lg-3 mb-7 mb-lg-0">
                <!-- Trigger Modal -->
                <a class="u-link text-center d-block" data-toggle="modal" href="#exampleModal">
                  <img class="img-fluid d-block mb-2" src="assets/img/modals/modal-basic.jpg" alt="Htmlstream">
                  Basic modal
                </a>
                <!-- End Trigger Modal -->

                <!-- Basic Modals -->
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Basic Modals</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        Woohoo, you're reading this text in a modal!
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Basic Modals -->
              </div>

              <div class="col-6 col-md-4 col-lg-3 mb-7 mb-lg-0">
                <!-- Trigger Modal -->
                <a class="u-link text-center d-block" data-toggle="modal" href="#exampleModalCenter">
                  <img class="img-fluid d-block mb-2" src="assets/img/modals/modal-vertically-centered.jpg" alt="Htmlstream">
                  Vertically centered modal
                </a>
                <!-- End Trigger Modal -->

                <!-- Vertically Centered Modals -->
                <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Vertically Centered Modal</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        Woohoo, you're reading this text in a modal! Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Vertically Centered Modals -->
              </div>

              <div class="col-6 col-md-4 col-lg-3">
                <!-- Trigger Modal -->
                <a class="u-link text-center d-block" data-toggle="modal" href="#exampleModalLong">
                  <img class="img-fluid d-block mb-2" src="assets/img/modals/modal-long.jpg" alt="Htmlstream">
                  Scrolling long content
                </a>
                <!-- End Trigger Modal -->

                <!-- Scrolling Long Content -->
                <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>

                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>

                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Scrolling Long Content -->
              </div>
            </div>

            <hr class="my-7">

            <h3 class="h5 mb-3">Modal Sizes</h3>
            <div class="row">
              <div class="col-6 col-md-4 col-lg-3">
                <!-- Trigger Modal -->
                <a class="u-link text-center d-block" data-toggle="modal" href=".bd-example-modal-sm">
                  <img class="img-fluid d-block mb-2" src="assets/img/modals/modal-small.jpg" alt="Htmlstream">
                  Small size
                </a>
                <!-- End Trigger Modal -->

                <!-- Small Size -->
                <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Small Size</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        ...
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Small Size -->
              </div>

              <div class="col-6 col-md-4 col-lg-3">
                <!-- Trigger Modal -->
                <a class="u-link text-center d-block" data-toggle="modal" href=".bd-example-modal-lg">
                  <img class="img-fluid d-block mb-2" src="assets/img/modals/modal-large.jpg" alt="Htmlstream">
                  Large size
                </a>
                <!-- End Trigger Modal -->

                <!-- Large Size -->
                <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Large Size</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        ...
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Large Size -->
              </div>
            </div>
          </div>
          <!-- End Modal -->
        </div>
      </section>
      <!-- End Modals -->

      <hr>

      <!-- Tooltips & Popovers -->
      <section class="u-content-space">
        <div class="container">
          <header class="w-md-50 mx-auto text-center mb-7">
            <h2 class="h1 font-weight-light mb-1">Tooltips &amp; Popovers</h2>
            <p>We have used default Bootstrap Tooltips and Popovers with minor custom styles to fit design look with other components.</p>
          </header>

          <!-- Tooltip -->
          <div class="demo-btn-space mb-4">
            <h3 class="h5 mb-3">Tooltip</h3>

            <div class="row">
              <div class="col-6 col-md-4 col-lg-3 mb-7 mb-lg-0">
                <a class="text-center d-block" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
                  <img class="img-fluid d-block mb-2" src="assets/img/tooltips/tooltip-top.jpg" alt="Htmlstream">
                  Tooltip on top
                </a>
              </div>

              <div class="col-6 col-md-4 col-lg-3 mb-7 mb-lg-0">
                <a class="text-center d-block" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
                  <img class="img-fluid d-block mb-2" src="assets/img/tooltips/tooltip-right.jpg" alt="Htmlstream">
                  Tooltip on right
                </a>
              </div>

              <div class="col-6 col-md-4 col-lg-3 mb-7 mb-lg-0">
                <a class="text-center d-block" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
                  <img class="img-fluid d-block mb-2" src="assets/img/tooltips/tooltip-bottom.jpg" alt="Htmlstream">
                  Tooltip on bottom
                </a>
              </div>

              <div class="col-6 col-md-4 col-lg-3 mb-7 mb-lg-0">
                <a class="text-center d-block" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
                  <img class="img-fluid d-block mb-2" src="assets/img/tooltips/tooltip-left.jpg" alt="Htmlstream">
                  Tooltip on left
                </a>
              </div>
            </div>
          </div>
          <!-- End Tooltip -->

          <hr class="my-7">

          <!-- Popovers -->
          <div class="demo-btn-space">
            <h3 class="h5 mb-3">Popovers</h3>

            <div class="row">
              <div class="col-6 col-lg-3 mb-7 mb-lg-0">
                <a class="u-link text-center d-block" tabindex="0" role="button"
                   data-toggle="popover"
                   data-trigger="focus"
                   data-container="body"
                   data-placement="top"
                   title="Popover on top"
                   data-content="Stream UI Kit - Forever Free, Open Source, Easy to Use!">
                   <img class="img-fluid d-block mb-2" src="assets/img/popovers/popover-top.jpg" alt="Htmlstream">
                  Popover on top
                </a>
              </div>

              <div class="col-6 col-lg-3 mb-7 mb-lg-0">
                <a class="u-link text-center d-block" tabindex="0" role="button"
                   data-toggle="popover"
                   data-trigger="focus"
                   data-container="body"
                   data-placement="right"
                   title="Popover on right"
                   data-content="Stream UI Kit - Forever Free, Open Source, Easy to Use!">
                   <img class="img-fluid d-block mb-2" src="assets/img/popovers/popover-right.jpg" alt="Htmlstream">
                  Popover on right
                </a>
              </div>

              <div class="col-6 col-lg-3 mb-7 mb-lg-0">
                <a class="u-link text-center d-block" tabindex="0" role="button"
                   data-toggle="popover"
                   data-trigger="focus"
                   data-container="body"
                   data-placement="bottom"
                   title="Popover on bottom"
                   data-content="Stream UI Kit - Forever Free, Open Source, Easy to Use!">
                   <img class="img-fluid d-block mb-2" src="assets/img/popovers/popover-bottom.jpg" alt="Htmlstream">
                  Popover on bottom
                </a>
              </div>

              <div class="col-6 col-lg-3 mb-7 mb-lg-0">
                <a class="u-link text-center d-block" tabindex="0" role="button"
                   data-toggle="popover"
                   data-trigger="focus"
                   data-container="body"
                   data-placement="left"
                   title="Popover on left"
                   data-content="Stream UI Kit - Forever Free, Open Source, Easy to Use!">
                   <img class="img-fluid d-block mb-2" src="assets/img/popovers/popover-left.jpg" alt="Htmlstream">
                  Popover on left
                </a>
              </div>
            </div>
          </div>
          <!-- End Popovers -->
        </div>
      </section>
      <!-- End Tooltips & Popovers -->

      <hr>

      <!-- Navigations -->
      <section class="u-content-space">
        <div class="container">
          <header class="w-md-50 mx-auto text-center mb-7">
            <h2 class="h1 font-weight-light mb-1">Responsive Navigations</h2>
            <p>We've extended default Bootstrap’s navbars with our custom styles and components in Stream UI Kit.</p>
          </header>
        </div>

        <!-- Navbar Primary -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
          <div class="container">
            <a class="navbar-brand" href="index.html">
              <img src="assets/img/logo-white.png" alt="Stream UI Kit" style="width: 100px;">
            </a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
              <ul class="navbar-nav ml-auto mr-sm-2 mt-2 mt-lg-0">
                <li class="nav-item active mr-3">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item mr-3">
                  <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item mr-3">
                  <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item mr-3">
                  <a class="nav-link" href="#">Our Work</a>
                </li>
                <li class="nav-item mr-3">
                  <a class="nav-link" href="#">Contacts</a>
                </li>
              </ul>

              <div class="my-2 my-lg-0">
                <a class="btn btn-secondary" href="#">Join Now Free</a>
              </div>
            </div>
          </div>
        </nav>
        <!-- End Navbar Primary -->

        <!-- Navbar Light -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container">
            <a class="navbar-brand mr-4" href="index.html">
              <img src="assets/img/logo.png" alt="Stream UI Kit" style="width: 100px;">
            </a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
              <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active mr-3">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item mr-3">
                  <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item mr-3">
                  <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item dropdown mr-3">
                  <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Profile <i class="fas fa-angle-down small ml-1"></i>
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>
                <li class="nav-item mr-3">
                  <a class="nav-link" href="#">Contacts</a>
                </li>
              </ul>

              <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search">
                <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button>
              </form>
            </div>
          </div>
        </nav>
        <!-- End Navbar Light -->

        <!-- Navbar Dark -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
          <div class="container">
            <a class="navbar-brand" href="index.html">
              <img src="assets/img/logo-white.png" alt="Stream UI Kit" style="width: 100px;">
            </a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
              <ul class="navbar-nav ml-auto mr-sm-2 mt-2 mt-lg-0">
                <li class="nav-item active mr-3">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item mr-3">
                  <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item mr-3">
                  <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item mr-3">
                  <a class="nav-link" href="#">Our Work</a>
                </li>
                <li class="nav-item mr-3">
                  <a class="nav-link" href="#">Contacts</a>
                </li>
              </ul>

              <ul class="navbar-nav">
                <li class="nav-item dropdown">
                  <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <img class="rounded-circle u-box-shadow-sm mr-2" width="35" height="35" src="assets/img-temp/ava/img3.jpg" alt="Htmlstream"> John Doe <i class="fas fa-angle-down small ml-1"></i>
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Profile</a>
                    <a class="dropdown-item" href="#">Account Settings</a>
                    <a class="dropdown-item" href="#">Newsletter</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Sign Out</a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <!-- End Navbar Dark -->

        <!-- Navbar Secondary -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
          <div class="container">
            <a class="navbar-brand" href="index.html">
              <img src="assets/img/logo-white.png" alt="Stream UI Kit" style="width: 100px;">
            </a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo04" aria-controls="navbarTogglerDemo04" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarTogglerDemo04">
              <form class="form-inline col-lg mr-auto my-2 my-lg-0">
                <input class="form-control w-75 mr-sm-2" type="search" placeholder="Search">
                <button class="btn btn-primary my-2 my-sm-0" type="submit">Search</button>
              </form>

              <ul class="navbar-nav mt-2 mt-lg-0">
                <li class="nav-item active mr-2">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item mr-2">
                  <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item mr-2">
                  <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item dropdown mr-2">
                  <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Profile <i class="fas fa-angle-down small ml-1"></i>
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contacts</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <!-- End Navbar Secondary -->

        <!-- Navbar Transparent -->
        <div class="u-hero-img" style="background-image: url('assets/img-temp/promo/img2.jpg'); height: 500px;">
          <nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
            <div class="container">
              <a class="navbar-brand" href="index.html">
                <img src="assets/img/logo-white.png" alt="Stream UI Kit" style="width: 100px;">
              </a>

              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo05" aria-controls="navbarTogglerDemo05" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>

              <div class="collapse navbar-collapse" id="navbarTogglerDemo05">
                <ul class="navbar-nav ml-auto mt-1 mt-lg-0">
                  <li class="nav-item active mx-2">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item mx-2">
                    <a class="nav-link" href="#">About</a>
                  </li>
                  <li class="nav-item mx-2">
                    <a class="nav-link" href="#">Services</a>
                  </li>
                  <li class="nav-item mx-2">
                    <a class="nav-link" href="#">Our Work</a>
                  </li>
                  <li class="nav-item mx-2">
                    <a class="nav-link" href="#">Contacts</a>
                  </li>
                </ul>

                <ul class="ml-auto navbar-nav">
                  <li class="nav-item dropdown">
                    <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <img class="rounded-circle u-box-shadow-sm mr-2" width="35" height="35" src="assets/img-temp/ava/img3.jpg" alt="Htmlstream"> John Doe <i class="fas fa-angle-down small ml-1"></i>
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="#">Profile</a>
                      <a class="dropdown-item" href="#">Account Settings</a>
                      <a class="dropdown-item" href="#">Newsletter</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Sign Out</a>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
        <!-- End Navbar Transparent -->
      </section>
      <!-- End Navigations -->

      <!-- Carousel -->
      <section class="u-content-space-bottom">
        <div class="container">
          <header class="w-md-50 mx-auto text-center mb-7">
            <h2 class="h1 font-weight-light mb-1">Bootstrap Carousel</h2>
            <p>We have used default Bootstrap Carousel in Stream UI Kit. Find out more detailed information about it <a target="_blank" href="https://getbootstrap.com/docs/4.1/components/carousel/">here</a>.</p>
          </header>

          <!-- Carousel -->
          <div class="row justify-content-center">
            <div class="col-lg-10">
              <div id="carouselExampleIndicators" class="carousel slide bg-light u-box-shadow-lg" data-ride="carousel">
                <ol class="carousel-indicators">
                  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="rounded active"></li>
                  <li data-target="#carouselExampleIndicators" data-slide-to="1" class="rounded"></li>
                  <li data-target="#carouselExampleIndicators" data-slide-to="2" class="rounded"></li>
                </ol>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img class="d-block w-100 rounded" src="assets/img-temp/1920x1080/img1.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block">
                      <h5 class="h2 font-weight-light mb-0">Stream UI Kit</h5>
                      <p class="lead">Forever Free, Open Source, Easy to Use!</p>
                    </div>
                  </div>

                  <div class="carousel-item">
                    <img class="d-block w-100 rounded" src="assets/img-temp/1920x1080/img2.jpg" alt="Second slide">
                    <div class="carousel-caption d-none d-md-block">
                      <h5 class="h2 font-weight-light mb-0">Stream UI Kit</h5>
                      <p class="lead">Forever Free, Open Source, Easy to Use!</p>
                    </div>
                  </div>

                  <div class="carousel-item">
                    <img class="d-block w-100 rounded" src="assets/img-temp/1920x1080/img9.jpg" alt="Third slide">
                    <div class="carousel-caption d-none d-md-block">
                      <h5 class="h2 font-weight-light mb-0">Stream UI Kit</h5>
                      <p class="lead">Forever Free, Open Source, Easy to Use!</p>
                    </div>
                  </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                  <span aria-hidden="true">
                    <i class="fas fa-angle-left carousel-control-size"></i>
                  </span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                  <span aria-hidden="true">
                    <i class="fas fa-angle-right carousel-control-size"></i>
                  </span>
                  <span class="sr-only">Next</span>
                </a>
              </div>
            </div>
          </div>
          <!-- End Carousel -->
        </div>
      </section>
      <!-- End Carousel -->

      <hr>

      <!-- Other Components -->
      <section class="u-content-space">
        <div class="container">
          <header class="w-md-50 mx-auto text-center mb-7">
            <h2 class="h1 font-weight-light mb-1">Other Components</h2>
            <p>All these components are based on Bootstrap and any other Bootstrap compoentns also can be used within Stream UI Kit.</p>
          </header>

          <h3 class="h5 mb-3">Progress Bars</h3>

          <!-- Progress Bars -->
          <div class="row">
            <div class="col-lg-6">
              <div class="demo-progress-space">
                <!-- Progress Bar (Square) -->
                <div class="progress rounded-0">
                  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <!-- End Progress Bar (Square) -->

                <!-- Progress Bar -->
                <div class="progress">
                  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <!-- End Progress Bar -->

                <!-- Progress Bar (Pilled) -->
                <div class="progress progress--pill">
                  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <!-- End Progress Bar (Pilled) -->
              </div>
            </div>

            <div class="col-lg-6">
              <div class="demo-progress-space">
                <!-- Progress Bar -->
                <div class="progress" style="height: 2px;">
                  <div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <!-- End Progress Bar -->

                <!-- Progress Bar -->
                <div class="progress" style="height: 5px;">
                  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <!-- End Progress Bar -->

                <!-- Progress Bar -->
                <div class="progress" style="height: 10px;">
                  <div class="progress-bar bg-dark" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <!-- End Progress Bar -->

                <!-- Multiple Bars -->
                <div class="progress" style="height: 20px;">
                  <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">20</div>
                  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30</div>
                  <div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">40</div>
                </div>
                <!-- End Multiple Bars -->
              </div>
            </div>
          </div>
          <!-- End Progress Bars -->

          <hr class="my-7">

          <h3 class="h5 mb-3">Badges</h3>

          <!-- Badges -->
          <div class="row mb-7">
            <div class="col-lg-6 mb-4 mb-lg-0">
              <span class="badge badge-primary">Primary</span>
              <span class="badge badge-secondary">Secondary</span>
              <span class="badge badge-success">Success</span>
              <span class="badge badge-danger">Danger</span>
              <span class="badge badge-warning">Warning</span>
              <span class="badge badge-info">Info</span>
              <span class="badge badge-light">Light</span>
              <span class="badge badge-dark">Dark</span>
            </div>

            <div class="col-lg-6 demo-btn-space">
              <button type="button" class="btn btn-primary mr-2">
                Notifications <span class="badge badge-secondary ml-2">142</span>
              </button>

              <button type="button" class="btn btn-dark mr-2">
                Activities <span class="badge badge-pill badge-light ml-2">Pro</span>
              </button>

              <button type="button" class="btn btn-secondary">
                Messages <span class="badge badge-pill badge-dark ml-2">12</span>
              </button>
            </div>
          </div>
          <!-- End Badges -->

          <hr class="my-7">

          <h3 class="h5 mb-3">List Groups</h3>

          <!-- List Groups -->
          <div class="row">
            <div class="col-lg-6 mb-4 mb-lg-0">
              <ul class="list-group u-font-size-90">
                <li class="list-group-item">
                  <div class="media">
                    <div class="d-flex mr-3">
                      <img class="rounded-circle u-box-shadow-sm mt-1" width="40" height="40" src="assets/img-temp/ava/img2.jpg" alt="Htmlstream">
                    </div>
                    <div class="media-body">
                      <p class="mb-0"><strong>Jane Moris</strong> <span class="badge badge-primary mr-1">Pro</span> saved your pin</p>
                      <span class="u-font-size-75 text-dark">5 minutes ago</span>
                    </div>
                  </div>
                </li>

                <li class="list-group-item">
                  <div class="media">
                    <div class="d-flex mr-3">
                      <img class="rounded-circle u-box-shadow-sm mt-1" width="40" height="40" src="assets/img-temp/ava/user-unknown.jpg" alt="Htmlstream">
                    </div>
                    <div class="media-body">
                      <p class="mb-0"><strong>Alberta Watson</strong> is offering free coffee</p>
                      <span class="u-font-size-75 text-dark">12 minutes ago</span>
                    </div>
                  </div>
                </li>

                <li class="list-group-item">
                  <div class="media">
                    <div class="d-flex mr-3">
                      <img class="rounded-circle u-box-shadow-sm mt-1" width="40" height="40" src="assets/img-temp/ava/img1.jpg" alt="Htmlstream">
                    </div>
                    <div class="media-body">
                      <p class="mb-0"><strong>Htmlstream</strong> sent you a message</p>
                      <span class="u-font-size-75 text-dark">56 minutes ago</span>
                    </div>
                  </div>
                </li>

                <li class="list-group-item">
                  <div class="media">
                    <div class="d-flex mr-3">
                      <img class="rounded-circle u-box-shadow-sm mt-1" width="40" height="40" src="assets/img-temp/ava/img3.jpg" alt="Htmlstream">
                    </div>
                    <div class="media-body">
                      <p class="mb-0"><strong>Edmon Low</strong> <span class="badge badge-secondary mr-1">Free</span> saved your pin</p>
                      <span class="u-font-size-75 text-dark">2 hours ago</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <div class="col-lg-6">
              <div class="list-group">
                <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active" href="#!">
                  Home
                  <span class="badge badge-primary badge-light">14</span>
                </a>
                <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" href="#!">
                  Profile
                  <span class="badge badge-danger">New</span>
                </a>
                <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" href="#!">
                  <span>Messages <span class="d-block small text-muted">Secondary text</span></span>
                  <span class="badge badge-info badge-pill">1</span>
                </a>
                <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" href="#!">
                  Settings
                  <span class="badge badge-secondary badge-pill">Pro</span>
                </a>
                <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center disabled" href="#!">
                  <span>Notifications - <span class="small">disabled</span></span>
                  <span class="badge badge-primary">7</span>
                </a>
              </div>
            </div>
          </div>
          <!-- End List Groups -->

          <hr class="my-7">

          <h3 class="h5 mb-3">Tabs</h3>

          <!-- Tabs -->
          <div class="row">
            <div class="col-lg-6 mb-6 mb-lg-0">
              <ul class="nav nav-tabs nav-tabs--v1" id="pills-tab" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" id="pills-home-tab-1" data-toggle="pill" href="#pills-home-1" role="tab" aria-controls="pills-home-1" aria-selected="true">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="pills-profile-tab-1" data-toggle="pill" href="#pills-profile-1" role="tab" aria-controls="pills-profile-1" aria-selected="false">Profile</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="pills-contact-tab-1" data-toggle="pill" href="#pills-contact-1" role="tab" aria-controls="pills-contact-1" aria-selected="false">Contact</a>
                </li>
              </ul>

              <div class="tab-content tab-content--v1" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-home-1" role="tabpanel" aria-labelledby="pills-home-tab-1">
                  <p>Stream UI Kit is beautiful Open Source Bootstrap 4 UI Kit under MIT license. The UI Kit comes with 5 beautiful complete pages and includes over 20 reusable and customizable UI Blocks. It’s lightweight and only ~17kb when minified.</p>
                </div>

                <div class="tab-pane fade" id="pills-profile-1" role="tabpanel" aria-labelledby="pills-profile-tab-1">
                  <p>Stream UI Kit is beautiful Open Source Bootstrap 4 UI Kit under MIT license. The UI Kit comes with 5 beautiful complete pages and includes over 20 reusable and customizable UI Blocks. It’s lightweight and only ~17kb when minified.</p>
                </div>

                <div class="tab-pane fade" id="pills-contact-1" role="tabpanel" aria-labelledby="pills-contact-tab-1">
                  <p>Stream UI Kit is beautiful Open Source Bootstrap 4 UI Kit under MIT license. The UI Kit comes with 5 beautiful complete pages and includes over 20 reusable and customizable UI Blocks. It’s lightweight and only ~17kb when minified.</p>
                </div>
              </div>
            </div>

            <div class="col-lg-6">
              <ul class="nav nav-pills nav-justified mb-3" id="pills-tab" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" id="pills-home-tab-2" data-toggle="pill" href="#pills-home-2" role="tab" aria-controls="pills-home-2" aria-selected="true">
                    <i class="fa fa-cubes mr-1"></i> Home
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="pills-profile-tab-2" data-toggle="pill" href="#pills-profile-2" role="tab" aria-controls="pills-profile-2" aria-selected="false">
                    <i class="fa fa-diamond mr-1"></i> Profile
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="pills-contact-tab-2" data-toggle="pill" href="#pills-contact-2" role="tab" aria-controls="pills-contact-2" aria-selected="false">
                    <i class="fa fa-cube mr-1"></i> Contact
                  </a>
                </li>
              </ul>

              <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-home-2" role="tabpanel" aria-labelledby="pills-home-tab-2">
                  <p>This is the first content! Stream UI Kit is beautiful Open Source Bootstrap 4 UI Kit under MIT license. The UI Kit comes with 5 beautiful complete pages and includes over 20 reusable and customizable UI Blocks. It’s lightweight and only ~17kb when minified.</p>
                </div>

                <div class="tab-pane fade" id="pills-profile-2" role="tabpanel" aria-labelledby="pills-profile-tab-2">
                  <p>This is the second content! Stream UI Kit is beautiful Open Source Bootstrap 4 UI Kit under MIT license. The UI Kit comes with 5 beautiful complete pages and includes over 20 reusable and customizable UI Blocks. It’s lightweight and only ~17kb when minified.</p>
                </div>

                <div class="tab-pane fade" id="pills-contact-2" role="tabpanel" aria-labelledby="pills-contact-tab-2">
                  <p>This is the third content! Stream UI Kit is beautiful Open Source Bootstrap 4 UI Kit under MIT license. The UI Kit comes with 5 beautiful complete pages and includes over 20 reusable and customizable UI Blocks. It’s lightweight and only ~17kb when minified.</p>
                </div>
              </div>
            </div>
          </div>
          <!-- End Tabs -->

          <hr class="my-7">


          <h3 class="h5 mb-3">Pagination</h3>

          <!-- Pagination -->
          <div class="row justify-content-between align-items-center mb-4">
            <div class="col-lg">
              <nav aria-label="Bootstrap Pagination Example">
                <ul class="pagination mb-0">
                  <li class="page-item">
                    <a class="page-link" href="#"><span class="mr-1 d-none d-sm-inline-block">&larr;</span> Previous</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">1</a>
                  </li>
                  <li class="page-item active">
                    <a class="page-link" href="#">2</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">3</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">4</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">5</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">Next <span class="ml-1 d-none d-sm-inline-block">&rarr;</span></a>
                  </li>
                </ul>
              </nav>
            </div>

            <div class="col-lg text-lg-right mt-1 mt-lg-0">
              <span class="u-font-size-90 text-muted">Page 2 of 5</span>
            </div>
          </div>
          <!-- End Pagination -->

          <!-- Pagination Large -->
          <div class="row justify-content-between align-items-center mb-4 d-none">
            <div class="col-lg-8">
              <nav aria-label="Bootstrap Pagination Example">
                <ul class="pagination pagination-lg mb-0">
                  <li class="page-item">
                    <a class="page-link" href="#"><span class="mr-1">&larr;</span> Previous</a>
                  </li>
                  <li class="page-item d-none d-lg-block">
                    <a class="page-link" href="#">1</a>
                  </li>
                  <li class="page-item active d-none d-lg-block">
                    <a class="page-link" href="#">2</a>
                  </li>
                  <li class="page-item d-none d-lg-block">
                    <a class="page-link" href="#">3</a>
                  </li>
                  <li class="page-item d-none d-lg-block">
                    <a class="page-link" href="#">4</a>
                  </li>
                  <li class="page-item d-none d-lg-block">
                    <a class="page-link" href="#">5</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">Next <span class="ml-1">&rarr;</span></a>
                  </li>
                </ul>
              </nav>
            </div>

            <div class="col-lg text-lg-right mt-2 mt-lg-0">
              <span class="text-muted">Page 2 of 5</span>
            </div>
          </div>
          <!-- End Pagination Large -->

          <hr class="my-7">

          <h3 class="h5 mb-3">Pager</h3>

          <!-- Pager -->
          <nav aria-label="Bootstrap Pager Example">
            <ul class="list-unstyled d-flex justify-content-between align-items-center mb-0">
              <li>
                <a href="#!" class="btn btn-primary pager-btn disabled"><span class="mr-1">&larr;</span> Previous</a>
              </li>
              <li>
                <span class="text-muted">Page 1 of 5</span>
              </li>
              <li>
                <a href="#!" class="btn btn-primary pager-btn">Next <span class="ml-1">&rarr;</span></a>
              </li>
            </ul>
          </nav>
          <!-- End Pager -->

          <hr class="my-7">

          <h3 class="h5 mb-3">Images</h3>

          <!-- Images -->
          <div class="row">
            <div class="col-sm-6 col-md-3 text-center mb-7 mb-md-0">
              <img class="u-box-shadow-lg img-fluid rounded mt-1" src="assets/img-temp/intro/img1.jpg" alt="Htmlstream">
            </div>
            <div class="col-sm-6 col-md-3 text-center mb-7 mb-md-0">
              <img class="u-box-shadow-lg img-fluid rounded-circle mt-1" src="assets/img-temp/intro/img1.jpg" alt="Htmlstream">
            </div>
            <div class="col-sm-6 col-md-3 text-center mb-7 mb-md-0">
              <img class="u-box-shadow-lg img-fluid img-thumbnail mt-1" src="assets/img-temp/intro/img1.jpg" alt="Htmlstream">
            </div>
            <div class="col-sm-6 col-md-3 text-center">
              <img class="u-box-shadow-lg img-fluid img-thumbnail rounded-circle mt-1" src="assets/img-temp/intro/img1.jpg" alt="Htmlstream">
            </div>
          </div>
          <!-- End Images -->
        </div>
      </section>
      <!-- End Other Components -->

      <!-- Examples -->
      <section id="js-scroll-to-demos" class="js-parallax bg-dark u-content-space u-box-shadow-lg" style="background-image: url(assets/img/bg-pattern.png);">
        <div class="container">
          <header class="w-md-50 mx-auto text-white text-center mb-8">
            <h2 class="h1 font-weight-light mb-1">Complete with Examples</h2>
            <p class="mb-4">We have created 5 beautiful complete pages with over 20 reusable and customizable UI Blocks to quickly start with the Stream UI Kit.</p>
            <a class="btn btn-primary py-3 px-4" target="_blank" href="home-page.html">
              <i class="fas fa-eye mr-2"></i> Preview Pages
            </a>
          </header>
        </div>

        <div class="container-fluid pt-6">
          <!-- Demo Examples -->
          <div class="row text-center text-white">
            <!-- Home Demo -->
            <div class="col-lg-3 mt-sm-0">
              <h5 class="mb-3">Home</h5>

              <!-- Mockup Browser -->
              <figure>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 857 40" style="enable-background:new 0 0 857 40;" xml:space="preserve">
                  <g>
                    <path style="fill: #fff;" d="M856.8,40.2H0.8V19c0-10.5,8.5-19,19-19h818c10.5,0,19,8.5,19,19V40.2z"/>
                  </g>
                  <g>
                    <ellipse style="fill: #fb4143;" cx="28.5" cy="20.1" rx="6" ry="6"/>
                    <ellipse style="fill: #fab633;" cx="48.4" cy="20.1" rx="6" ry="6"/>
                    <ellipse style="fill: #0dd157;" cx="68.4" cy="20.1" rx="6" ry="6"/>
                  </g>
                </svg>
              </figure>
              <!-- End Mockup Browser -->

              <a target="_blank" href="home-page.html">
                <img class="img-fluid w-100 u-browser-img u-box-shadow-lg" src="assets/img-temp/demo/img1.jpg" alt="Hom Page">
              </a>

              <hr class="u-opacity-1 d-block d-lg-none my-5">
            </div>
            <!-- End Home Demo -->

            <!-- Services Demo -->
            <div class="col-lg-3">
              <h5 class="mb-3">Services</h5>

              <!-- Mockup Browser -->
              <figure>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 857 40" style="enable-background:new 0 0 857 40;" xml:space="preserve">
                  <g>
                    <path style="fill: #fff;" d="M856.8,40.2H0.8V19c0-10.5,8.5-19,19-19h818c10.5,0,19,8.5,19,19V40.2z"/>
                  </g>
                  <g>
                    <ellipse style="fill: #fb4143;" cx="28.5" cy="20.1" rx="6" ry="6"/>
                    <ellipse style="fill: #fab633;" cx="48.4" cy="20.1" rx="6" ry="6"/>
                    <ellipse style="fill: #0dd157;" cx="68.4" cy="20.1" rx="6" ry="6"/>
                  </g>
                </svg>
              </figure>
              <!-- End Mockup Browser -->

              <a target="_blank" href="services.html">
                <img class="img-fluid w-100 u-browser-img u-box-shadow-lg" src="assets/img-temp/demo/img2.jpg" alt="Services Page">
              </a>

              <hr class="u-opacity-1 d-block d-lg-none my-5">
            </div>
            <!-- End Services Demo -->

            <!-- About Us Demo -->
            <div class="col-lg-3">
              <h5 class="mb-3">About Us</h5>

              <!-- Mockup Browser -->
              <figure>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 857 40" style="enable-background:new 0 0 857 40;" xml:space="preserve">
                  <g>
                    <path style="fill: #fff;" d="M856.8,40.2H0.8V19c0-10.5,8.5-19,19-19h818c10.5,0,19,8.5,19,19V40.2z"/>
                  </g>
                  <g>
                    <ellipse style="fill: #fb4143;" cx="28.5" cy="20.1" rx="6" ry="6"/>
                    <ellipse style="fill: #fab633;" cx="48.4" cy="20.1" rx="6" ry="6"/>
                    <ellipse style="fill: #0dd157;" cx="68.4" cy="20.1" rx="6" ry="6"/>
                  </g>
                </svg>
              </figure>
              <!-- End Mockup Browser -->

              <a target="_blank" href="about-us.html">
                <img class="img-fluid w-100 u-browser-img u-box-shadow-lg" src="assets/img-temp/demo/img3.jpg" alt="About Us Page">
              </a>

              <hr class="u-opacity-1 d-block d-lg-none my-5">
            </div>
            <!-- End About Us Demo -->

            <!-- Profile & Contacts Demos -->
            <div class="col-lg-3">
              <div class="mb-6">
                <h5 class="mb-3">Profile <small>(About Me)</small></h5>

                  <!-- Mockup Browser -->
                  <figure>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         viewBox="0 0 857 40" style="enable-background:new 0 0 857 40;" xml:space="preserve">
                      <g>
                        <path style="fill: #fff;" d="M856.8,40.2H0.8V19c0-10.5,8.5-19,19-19h818c10.5,0,19,8.5,19,19V40.2z"/>
                      </g>
                      <g>
                        <ellipse style="fill: #fb4143;" cx="28.5" cy="20.1" rx="6" ry="6"/>
                        <ellipse style="fill: #fab633;" cx="48.4" cy="20.1" rx="6" ry="6"/>
                        <ellipse style="fill: #0dd157;" cx="68.4" cy="20.1" rx="6" ry="6"/>
                      </g>
                    </svg>
                  </figure>
                  <!-- End Mockup Browser -->

                <a target="_blank" href="about-me.html">
                  <img class="img-fluid w-100 u-browser-img u-box-shadow-lg" src="assets/img-temp/demo/img4.jpg" alt="About Me Page">
                </a>
              </div>

              <hr class="u-opacity-1 my-5">

              <h5 class="mb-3">Contacts</h5>

              <!-- Mockup Browser -->
              <figure>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 857 40" style="enable-background:new 0 0 857 40;" xml:space="preserve">
                  <g>
                    <path style="fill: #fff;" d="M856.8,40.2H0.8V19c0-10.5,8.5-19,19-19h818c10.5,0,19,8.5,19,19V40.2z"/>
                  </g>
                  <g>
                    <ellipse style="fill: #fb4143;" cx="28.5" cy="20.1" rx="6" ry="6"/>
                    <ellipse style="fill: #fab633;" cx="48.4" cy="20.1" rx="6" ry="6"/>
                    <ellipse style="fill: #0dd157;" cx="68.4" cy="20.1" rx="6" ry="6"/>
                  </g>
                </svg>
              </figure>
              <!-- End Mockup Browser -->

              <a target="_blank" href="contacts.html">
                <img class="img-fluid w-100 u-browser-img u-box-shadow-lg" src="assets/img-temp/demo/img5.jpg" alt="Contact Us Page">
              </a>
            </div>
            <!-- End Profile & Contacts Demos -->
          </div>
          <!-- End Demo Examples -->
        </div>
      </section>
      <!-- End Examples -->

      <!-- Bonus Files -->
      <section class="js-parallax bg-light u-content-space" style="background-image: url(assets/img/bg-pattern.png);">
        <div class="container">
          <header class="w-md-50 mx-auto text-center mb-8">
            <h2 class="h1 font-weight-light mb-1">Bonus Files</h2>
            <p class="mb-4">Stream UI Kit includes all used images with a link to collection, SASS source files, gulp sources for completely free as a bonus.</p>
          </header>

          <!-- Images -->
          <div class="row">
            <div class="col-lg-5 align-self-center pr-lg-5 mb-5 mb-lg-0">
              <h2 class="font-weight-light mb-3">Free Images</h2>
              <p>All images are used from <strong class="text-primary">Unsplash</strong> and we included 100% all image sources in our download pacakge. In addition, all images can be easliy accessed in our unsplash collection.</p>
              <p>Access all images used in Stream - UI Kit for free.</p>
              <a class="btn btn-outline-primary" target="_blank" href="https://unsplash.com/collections/1572580/stream-ui-kit">
                <i class="fas fa-camera mr-2"></i> Free Use &amp; Download
              </a>
            </div>

            <div class="col-lg-7 order-first order-lg-last mb-4 mb-lg-0">
              <!-- Mockup Browser -->
              <figure>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 857 40" style="enable-background:new 0 0 857 40;" xml:space="preserve">
                  <g>
                    <path style="fill: #fff;" d="M856.8,40.2H0.8V19c0-10.5,8.5-19,19-19h818c10.5,0,19,8.5,19,19V40.2z"/>
                  </g>
                  <g>
                    <ellipse style="fill: #fb4143;" cx="28.5" cy="20.1" rx="6" ry="6"/>
                    <ellipse style="fill: #fab633;" cx="48.4" cy="20.1" rx="6" ry="6"/>
                    <ellipse style="fill: #0dd157;" cx="68.4" cy="20.1" rx="6" ry="6"/>
                  </g>
                </svg>
              </figure>
              <!-- End Mockup Browser -->

              <a target="_blank" href="https://unsplash.com/collections/1572580/stream-ui-kit">
                <img class="img-fluid w-100 u-browser-img u-box-shadow-lg" src="assets/img-temp/bonus/stream-unsplash.jpg" alt="Unsplash Stream UI Kit Collection">
              </a>
            </div>
          </div>
          <!-- End Images -->

          <hr class="my-8">

          <!-- Icons -->
          <div class="row">
            <div class="col-lg-7 mb-4 mb-lg-0">
              <!-- Mockup Browser -->
              <figure>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 857 40" style="enable-background:new 0 0 857 40;" xml:space="preserve">
                  <g>
                    <path style="fill: #fff;" d="M856.8,40.2H0.8V19c0-10.5,8.5-19,19-19h818c10.5,0,19,8.5,19,19V40.2z"/>
                  </g>
                  <g>
                    <ellipse style="fill: #fb4143;" cx="28.5" cy="20.1" rx="6" ry="6"/>
                    <ellipse style="fill: #fab633;" cx="48.4" cy="20.1" rx="6" ry="6"/>
                    <ellipse style="fill: #0dd157;" cx="68.4" cy="20.1" rx="6" ry="6"/>
                  </g>
                </svg>
              </figure>
              <!-- End Mockup Browser -->

              <a target="_blank" href="https://fontawesome.com/icons?d=gallery&m=free">
                <img class="img-fluid w-100 u-browser-img u-box-shadow-lg" src="assets/img-temp/bonus/stream-icons.jpg" alt="Font Awesome Icons">
              </a>
            </div>

            <div class="col-lg-5 align-self-center pl-lg-5">
              <h2 class="font-weight-light mb-3">950+ Icons</h2>
              <p>We used <strong class="text-primary">Font Awesome</strong> icons, the web’s most popular icon set and toolkit. It includes over 950 free icons suitable for any needs.</p>
              <p>Access to 950+ free icons used in Stream - UI Kit.</p>
              <a class="btn btn-outline-primary" target="_blank" href="https://fontawesome.com/icons?d=gallery&m=free">
                <i class="fab fa-font-awesome-flag mr-2"></i> Font Awesome Icons
              </a>
            </div>
          </div>
          <!-- End Icons -->

          <hr class="my-8">

          <!-- Modern Tools -->
          <div class="row u-content-space-bottom">
            <div class="col-lg-5 align-self-center pr-lg-5 mb-5 mb-lg-0">
              <h2 class="font-weight-light mb-3">Modern Toolkit</h2>
              <p>Buit with modern tools and approaches. We have inlcuded all <strong class="text-primary">SASS</strong> source files along with <strong class="text-primary">Gulp</strong> files. Change the primary color within a single line and do more with the power of SASS.</p>
              <p>Learn more how to intall and use these tools.</p>
              <a class="btn btn-outline-primary" target="_blank" href="https://htmlstream.com/public/preview/stream-ui-kit/docs.html">
                <i class="fas fa-book mr-2"></i> Read More in Docs
              </a>
            </div>

            <div class="col-lg-7 order-first order-lg-last mb-4 mb-lg-0">
              <!-- Mockup Browser -->
              <figure>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 857 40" style="enable-background:new 0 0 857 40;" xml:space="preserve">
                  <g>
                    <path style="fill: #fff;" d="M856.8,40.2H0.8V19c0-10.5,8.5-19,19-19h818c10.5,0,19,8.5,19,19V40.2z"/>
                  </g>
                  <g>
                    <ellipse style="fill: #fb4143;" cx="28.5" cy="20.1" rx="6" ry="6"/>
                    <ellipse style="fill: #fab633;" cx="48.4" cy="20.1" rx="6" ry="6"/>
                    <ellipse style="fill: #0dd157;" cx="68.4" cy="20.1" rx="6" ry="6"/>
                  </g>
                </svg>
              </figure>
              <!-- End Mockup Browser -->

              <a target="_blank" href="https://htmlstream.com/public/preview/stream-ui-kit/docs.html">
                <img class="img-fluid w-100 u-browser-img u-box-shadow-lg" src="assets/img-temp/bonus/stream-sources.jpg" alt="Unsplash Stream UI Kit Collection">
              </a>
            </div>
          </div>
          <!-- End Modern Tools -->
        </div>
      </section>
      <!-- End Bonus Files -->

      <!-- Free Download -->
      <section class="demo-download-section">
        <div class="js-parallax u-content-space u-box-shadow-lg bg-white rounded-md mx-3 mx-lg-5" style="background-image: url(assets/img/bg-pattern.png);">
          <div class="container">
            <div class="text-center w-md-50 mx-auto py-5">
              <a class="display-4 d-inline-block mb-3 text-dark" target="_blank" href="https://github.com/htmlstreamofficial/stream-ui-kit"
                 data-toggle="tooltip"
                 data-placement="top" title="Star on Github"
                 data-original-title="Star stream-ui-kit on Github" >
                <i class="fab fa-github"></i>
              </a>
              <p class="lead font-weight-normal mb-5">All these completly FREE under MIT license. You can use <strong class="text-primary">Stream UI Kit</strong> even commercially!</p>
              <a class="btn btn-primary u-box-shadow-lg py-3 px-4" href="https://htmlstream.com/templates/stream-ui-kit">
                <i class="fas fa-cloud-download-alt mr-2"></i> Free Download Now
              </a>
            </div>
          </div>
        </div>
      </section>
      <!-- End Free Download -->
    </main>

    <!-- Footer -->
    <footer class="bg-dark u-content-space-top pb-4" role="footer">
      <div class="container-fluid">
        <div class="px-md-3">
          <!-- Social Sharing -->
          <div class="text-center">
          <h2 class="h5 font-weight-light text-white mb-4">Sharing is caring, support us by just sharing.</h2>

            <div class="d-flex justify-content-center">
              <!-- Facebook Share -->
              <div class="mr-3 mb-2 mb-md-0">
                <div class="fb-share-button demo-faceook-share"
                     data-href="http://facebook.com/htmlstream"
                     data-layout="button"
                     data-size="large"
                     data-mobile-iframe="true">
                  <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse">Share</a>
                </div>
              </div>
              <!-- End Facebook Share -->

              <!-- Google Plus -->
              <div class="mr-3 mb-2 mb-md-0">
                <div class="g-plus" data-action="share" data-annotation="bubble" data-height="52"></div>
              </div>
              <!-- End Google Plus -->

              <!-- Tweet -->
              <div class="mr-3">
                <a href="https://twitter.com/intent/tweet" class="twitter-share-button" data-size="large" data-text="Stream UI Kit is beautiful Open Source Bootstrap 4 UI Kit under MIT license." data-hashtags="StreamUIKit, Bootstrap, Freebies" data-related="htmlstream, freebies, bootstrap">@htmlstream</a>
              </div>
              <!-- End Tweet -->
            </div>
          </div>
          <!-- End Social Sharing -->

          <hr class="u-opacity-1 mb-4">
        </div>

        <!-- Copyright and Social Icons -->
        <div class="row px-md-3">
          <div class="col-md-8 text-center text-md-left mb-3 mb-md-0">
            <small class="text-white">&copy; 2018 <a class="text-white" href="https://htmlstream.com">Htmlstream</a>. All Rights Reserved.</small>
          </div>

          <div class="col-md-4 align-self-center">
            <ul class="list-inline text-center text-md-right mb-0">
              <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Facebook">
                <a class="text-white" target="_blank" href="https://www.facebook.com/htmlstream">
                  <i class="fab fa-facebook"></i>
                </a>
              </li>
              <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Instagram">
                <a class="text-white" target="_blank" href="https://www.instagram.com/htmlstream">
                  <i class="fab fa-instagram"></i>
                </a>
              </li>
              <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Twitter">
                <a class="text-white" target="_blank" href="https://twitter.com/htmlstream">
                  <i class="fab fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Dribbble">
                <a class="text-white" target="_blank" href="https://dribbble.com/htmlstream">
                  <i class="fab fa-dribbble"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <!-- End Copyright and Social Icons -->
      </div>
    </footer>
    <!-- End Footer -->

    <!-- JAVASCRIPTS (Load javascripts at bottom, this will reduce page load time) -->
    <!-- Global Vendor -->
    <script src="assets/vendors/jquery.min.js"></script>
    <script src="assets/vendors/jquery.migrate.min.js"></script>
    <script src="assets/vendors/popper.min.js"></script>
    <script src="assets/vendors/bootstrap/js/bootstrap.min.js"></script>

    <!-- Components Vendor  -->
    <script src="assets/vendors/magnific-popup/jquery.magnific-popup.min.js"></script>
    <script src="assets/vendors/jquery.parallax.js"></script>

    <!-- Theme Settings and Calls -->
    <script src="assets/js/global.js"></script>

    <!-- Theme Components and Settings -->
    <script src="assets/js/vendors/parallax.js"></script>
    <!-- END JAVASCRIPTS -->

    <!-- Demo Code Only -->
    <script>
      // Font Toggle
      $(document).on('ready', function () {
        $('.js-font-change-btn').click(function() {
          $('.js-font-change-btn__icon').toggleClass('fa-toggle-on');
          $('.js-font-content').toggleClass('u-font-accent');
          $('.js-font-content__chnage1').toggleClass('d-none');
          $('.js-font-content__chnage2').toggleClass('d-inline-block');
        });
      });
      // End Font Toggle

      // Facebook Like
      window.fbAsyncInit = function () {
        // init the FB JS SDK
        FB.init({
          appId: '1972702999621713',
          status: true,
          xfbml: true,
          version: 'v2.3'
        });
        if (typeof gaSocialTracking != 'undefined') gaSocialTracking.trackFacebook();
        setTimeout(function () {
          if (typeof window.fbCallback == 'function') {
            window.fbCallback();
          }
        }, 3000); // to make sure FB was loaded
      };
      (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
      // Facebook Like

      // Twitter Follow
      window.twttr = (function (d, s, id) {
        var t, js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "//platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
        return window.twttr || (t = {
          _e: [], ready: function (f) {
            t._e.push(f)
          }
        });
      }(document, "script", "twitter-wjs"));
      twttr.ready(function (twttr) {
        twttr.events.bind('tweet', function (event) {
          if (typeof gaSocialTracking != 'undefined') gaSocialTracking.trackTwitter();
        });
      });
      // Twitter Follow
    </script>
    <!-- End Demo Code Only -->

    <!-- Github and Google Plus Buttons -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <!-- End Github and Google Plus Buttons -->
  </body>
  <!-- End Body -->
</html>
